<template>
   <div class="myletter-wrapper">
       <div class="notication">
           <div>系统自动清理三个月前的已读通知</div>
           <div class="notication-btn">
                <div class="unRead" @click="checkRead('0')">只看未读</div>
                <div class="cancleRead" @click="checkRead('')" v-if="readBtn==false">取消</div>
                <div class="allRead" @click="markallRead" v-if="readBtn==true">全部已读</div>
           </div>
        </div>
        <div v-if="privateletterList.length!=0">
            <div class="news-content">
                    <div class="news-item" v-for="(item,index) in privateletterList" :key="index"  @click="MarkoneRead(item.id)"><div class="left-news"><div class="news-nr">{{item.content}}</div><div class="news-status" v-if="item.status=='0'">未读</div></div><div class="mark-read" v-if="item.status=='0'">标记已读</div><div class="news-date" v-if="item.status!='0'">{{item.createdAt | formatTim}}</div></div>
            </div>
            <div class="explain">显示第1至10项结果，共{{privateletterList.length}}项</div>
        </div>
        <div v-else class="noNews">
          <div class="noNewsbg">
            <img src="../../images/xiajiazhuangtai.png"/>
            <div class="notify-word">还没有人给你发私信哟</div>
          </div>
        </div>
       <div class="class-pagination pagination-style" v-if="privateletterList.length!=0">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next"
          :total="Number(totalCol)"
          :pager-count="10"
          @current-change="pageChange"
        ></el-pagination>
      </div>
   </div> 
</template>
<script>
import * as opreate from 'api/getData'
import { mapGetters,mapActions} from 'vuex'
export default {
    data(){
        return{
            currentPage: 1,
            pageSize: 10,
            totalCol: 0,
            privateletterList:[],
            unreadletterNumber:'',
            readBtn:true
        }
    },
    props: {
      myNotifyD: null,
      mesColD:null
    },
    inject:['reload'],
    mounted(){
      this.getprivateletterList()
      this.removeList()
    },
    computed:{
      ...mapGetters([
        'currentUser',
        ])
    },
    watch:{
      unreadletterNumber(){
      }
    },
    filters: {
    formatTim(timeData) {
      // console.log('timeData:',timeData)
      let data, YY, MM, DD, hh, mm,
        that = this,
        addZero = n => n < 10 ? '0' + n : '' + n;

      data = new Date(timeData * 1)
      YY = data.getFullYear()
      MM = addZero(data.getMonth() + 1)
      DD = addZero(data.getDate())
      hh = addZero(data.getHours())
      mm = addZero(data.getMinutes())
      return `${YY}-${MM}-${DD}  ${hh}:${mm}`
    }
    },
    methods:{
        pageChange(e) {
          if(this.readBtn==false){
            opreate.findGmessageList(e.toString(),10,this.currentUser.account,0,1).then(res=>{
                  this.privateletterList=res.data.gmessageList
                  this.totalCol = res.data.totalRow
              })
          }else{
          opreate.findGmessageList(e.toString(),10,this.currentUser.account,'',1).then(res=>{
                this.privateletterList=res.data.gmessageList
                this.totalCol = res.data.totalRow
            })
          }
        },
        getprivateletterList(){
          opreate.findGmessageList(1,10,this.currentUser.account,'',1).then(res=>{
                this.privateletterList=res.data.gmessageList
                this.totalCol=res.data.totalRow
                this.unreadletterNumber=res.data.unreadNumber
                this.setUnreadlsNumber(this.unreadletterNumber)
          })
        },
        checkRead(isRead){
           opreate.findGmessageList(1,10,this.currentUser.account,isRead,1).then(res=>{
                if(isRead=='0')
                {
                  this.readBtn=false
                }else
                {
                  this.readBtn=true
                }
                this.privateletterList=res.data.gmessageList
                this.unreadletterNumber=res.data.unreadNumber
                if(this.currentPage>1)
                {
                  this.currentPage=1
                }
          })
        },
        markallRead(){
          this.$confirm('此操作会将未读的动态提醒全部标记为已读；', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            opreate.markreadList(this.currentUser.account,1).then(res=>{
              console.log(res)
              if(res.data.status=="success"){
                this.getprivateletterList()
                // this.reload()
              }
            })
          }).catch(() => {
          });
        },
        MarkoneRead(id){
          opreate.markonereadList(id,'1').then(res=>{
            this.getprivateletterList()
            // this.reload()
          })
        },
        removeList(){
          opreate.removeThreemonthdataList(this.currentUser.account,1).then(res=>{
          })
        },
        ...mapActions(['setUnreadlsNumber'])
    }
}
</script>
<style lang="stylus" scoped>
.myletter-wrapper
  .notication
    height: 74px;
    line-height: 74px;
    padding-left: 30px;
    border-bottom:1px solid #eee;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(164,164,164,1);
    display:flex;
    align-items:center
    .notication-btn
      flex:1
      display:flex;
      justify-content:flex-end
      .allRead,.unRead,.cancleRead
        width:88px;
        height:32px;
        background:rgba(255,239,237,1);
        border:1px solid rgba(255,98,82,1);
        border-radius:2px;
        font-size:14px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(255,98,82,1);
        text-align:center;
        line-height:32px;
        margin-right:30px
        &:hover
          background:#F73C28;
          color:#fff

  .news-content
    text-indent:30px
    .news-item
      height: 62px;
      border-bottom:1px solid #eee; 
      display:flex;
      align-items:center;
      cursor:pointer;
      .left-news
        flex: 1;
        display: flex;
        align-items: center;
        cursor:pointer
        .news-nr:hover
          color:rgba(247,60,40,1);
          cursor:pointer
        .news-status
          width: 60px;
          height: 20px;
          border: 1px solid rgba(255,98,82,1); 
          text-align:center;
          line-height 20px;
          margin-left 19px;
          font-size:12px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(255,98,82,1);
          text-indent:0
      .news-date
        margin-right: 30px;
        font-size: 14px;
        font-family: MicrosoftYaHei;
        font-weight: 400;
        color: rgba(164,164,164,1);
      .mark-read
        width:86px;
        height:30px;
        background:rgba(255,98,82,1);
        border-radius:4px;
        font-size:14px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(255,255,255,1);
        text-align:center;
        line-height:30px;
        text-indent:0;
        margin-right:30px;
        display:none;
        cursor:pointer
            
    .news-item:hover
        background:#F9F9F9;
    .news-item:hover .mark-read
        display:block;

  .explain
    height:60px;
    line-height:60px;
    font-size:14px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(164,164,164,1);
    text-indent:30px
  
  .pagination-style
    padding: 60px 0 87px 0;
    background: #f5f5f5;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    box-shadow: unset;
  
  .noNews
    text-align: center;
    height: 329px;
    background:#f5f5f5;
    padding-bottom:111px
    .noNewsbg
      background:#fff;
      height:329px
      img 
        width: 123px;
        height: 151px;
        margin-top:68px
      .notify-word
        margin-top:25px;
        font-size:16px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(164,164,164,1);
</style>


